import React from 'react';
import { connect } from 'dva';
import { Table, Spin, Popconfirm, message, Modal, Icon } from 'antd';


@connect((state) => {
  // state.node是models里的namespace
  return { ...state.user, loading: state.loadingBar === 1 };
})


export default class DataTable extends React.Component {

  state = {
    editVisible: false,
    bordered: true,
    editRecord: {},
  }
  onDelete = (record) => {
    message.success('删除' + record.name);
  }
  onEdit = (record) => {
    this.setState({ editRecord: record });
    this.setState({ editVisible: true });
  }
  setEditModalVisible = (visible) => {
    this.setState({ editVisible: visible });
  }
  changePageHandler = (pageNum, pageSize) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'user/queryUserList', // node是model的namespace，queryNodeList是model里的effect方法
      payload: {
        pageNum,
        pageSize,
      },
    });
  }
  changePageSizeHandler = (current, pageSize) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'user/queryUserList',
      payload: {
        pageNum: current,
        pageSize,
      },
    });
  }


  columns = [{
    title: '用户名',
    dataIndex: 'name',
    key: 'name',
  }, {
    title: '登录名',
    dataIndex: 'loginName',
    key: 'loginName',
  }, {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    render: (value, row) => {
      if (row.status === 1) {
        return (
          '正常'
        );
      } else {
        return (
          '停用'
        );
      }
    },
  }, {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'creatTime',
  }, {
    title: '操作',
    key: 'action',
    render: (text, record) => (
      <span>
        <a href="javascript:void(0)" onClick={() => this.onEdit(record)}>编辑</a>
        <span className="ant-divider" />
        <Popconfirm title="确定删除?" onConfirm={() => this.onDelete(record)}>
          <a href="#">删除</a>
        </Popconfirm>
      </span>
    ),
  }];

  render = () => {
    const { list, total, pageSize: size, loading } = this.props;
    return (
      <div className="spider-container">
        <Spin spinning={loading} delay={3}>
          <Table
            rowKey="id" columns={this.columns} dataSource={list} size="middle" bordered={this.state.bordered}
            pagination={{
              pageSize: size,
              showQuickJumper: true,
              size: 'middle',
              total,
              onChange: (pageTo, pageSize) => this.changePageHandler(pageTo, pageSize),
              onShowSizeChange: (current, pageSize) =>
                this.changePageSizeHandler(current, pageSize),
              showSizeChanger: true,
              pageSizeOptions: ['10', '20', '30', '50', '100'],
            }}
          />
        </Spin>
        <Modal
          title="修改"
          wrapClassName="vertical-center-modal"
          visible={this.state.editVisible}
          onOk={() => this.setEditModalVisible(false)}
          onCancel={() => this.setEditModalVisible(false)}
        >
          <p>{this.state.editRecord.name}</p>
          <p>{this.state.editRecord.id}</p>
          <p style={{ fontSize: 18 }}><Icon type="car" /><Icon type="car" /><Icon type="car" /><Icon type="car" /></p>
          <p>some contents...</p>
          <p>some contents...</p>
          <p>some contents...</p>
          <p>some contents...</p>
          <p>some contents...</p>
          <p>some contents...</p>
          <p>some contents...</p>
          <p>some contents...</p>
        </Modal>
      </div>
    );
  }
}
